<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0061)http://www.wikitude.com/doc/architect_tutorial/tutorial5.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" 
	content="width=device-width, height=device-height, 
		initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Port Heritage</title>

<!-- CSS Styles -->
<style type="text/css">
* {
	margin: 0;
}

html,body {
	height: 100%;
}

#footer {
	height: 4em;
	background-color: rgba(255, 255, 255, 0.5);
	padding: 5px 10px;
	display: none;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

/* CSS Style for status message at the top of the  (Heads Up Display) */
.status {
	border-radius: 2em;
	border: solid 2px #6d6d6d;
	/*background-color: rgba(256, 193, 0, 0.7);*/
	background-color: rgba(255, 255, 255, 0.5);
	color: black;
	text-align: center;
	font-weight: bold;
	position: absolute;
	width: 90%;
	height: 5%;
	left: 5%;
	top: 1%;
}
</style>

<!-- Include the ARchitect library -->
<script src="architect://architect.js"></script>

</head>

<body>
	<script>
            // Tutorial code using the ARchitect Javascript library
            
            // Create new images, which will be loaded right away
            firstImage = new AR.ImageResource("marker1.png", {onError: errorLoadingImage});
            secondImage = new AR.ImageResource("marker2.png", {onError: errorLoadingImage});
            thirdImage = new AR.ImageResource("marker3.png", {onError: errorLoadingImage});
            
            
            // current selected object
            var selectedObject = null;
            
            
            //variable that keeps the jsonData received from the native app
            var jsonObject;
            
            
            //function that gets called when the displayed poi bubble is clicked
            //sends the id of the selected poi to the native app
            function generateOnPoiBubbleClickFunc(id, name, description)
            {
                return function()
                {
                    //document.location = "architectsdk://opendetailpage?id="+id+"&name="+encode(name)+"&description="+encode(description);
                    document.location = "architectsdk://opendetailpage?id="+id;
                }
            }
            
            
            // creates a property animation
            function createOnClickAnimation(imageDrawable)
            {
                var anim = new AR.PropertyAnimation( imageDrawable, 'scaling', 1.0, 1.2, 750, new AR.EasingCurve(AR.CONST.EASING_CURVE_TYPE.EASE_OUT_ELASTIC, {amplitude : 2.0}) );
                return anim;
            }
            
            
            // creates a function for assigning to label's and imageDrawable's onClickTrigger
            function createClickTrigger(id, name, description) 
            {
                return function() 
                {
                    // hide the bubble
                    document.getElementById("footer").style.display = 'block';
                    document.getElementById("poiName").innerHTML=jsonObject[id].name;
                    document.getElementById("poiDesc").innerHTML=jsonObject[id].description.substring(0,25);
                    document.getElementById("footer").onclick= generateOnPoiBubbleClickFunc(id, name, description);
                    
                    // reset the previous selected poi
                    if(selectedObject != null)
                    {
                        // reset the property animation
                        if(selectedObject.animation){
                        	  selectedObject.animation.stop();
                        }
                        
                        selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
                        selectedObject.drawable.scaling = 1.0;
                        selectedObject.poiObj.renderingOrder = 0;
                    }
                    
                    // set a new select status for the current selected poi
                    selectedObject = jsonObject[id];
                    selectedObject.arLabel.style.backgroundColor = '#FFFFFFFF';
                    selectedObject.poiObj.renderingOrder = 1;
                    
                    // start the assigned animation
                    if(selectedObject.animation){
                    	selectedObject.animation.start();
                    }
                    
                    return true;
                }
            }
            
            //function called from the native app fia callJavascript method
            //receives json-data as string and processes the contained information
            function newData(jsonData) {
                jsonObject = jsonData;
                document.getElementById("statusElement").innerHTML='Loading JSON objects';
                
                for(var i = 0; i < jsonObject.length; i++)
                {
                    var poidrawables = new Array();
                    
                    var drawable;
                    var label;
                    
                    if(jsonObject[i].type < 4) {
                    	label = new AR.Label(jsonObject[i].name,1.0, {offsetY : -1.5,
                            triggers: { 
                            onClick:
                            createClickTrigger(jsonObject[i].id, jsonObject[i].name, jsonObject[i].description)},
                            style : {textColor : '#FFC100',backgroundColor : '#FFFFFF80'}});
   
                    	var poiImage;
	                    if (jsonObject[i].type == 1) {
	                        poiImage = firstImage;
	                    }
	                    else if (jsonObject[i].type == 2) {
	                        poiImage = secondImage;
	                    }
	                    else {
	                        poiImage = thirdImage;
	                    }
	                    
	                    drawable = new AR.ImageDrawable(poiImage, 2.0,
	                                                   {triggers: { 
	                                                   onClick:
	                                                   createClickTrigger(jsonObject[i].id, jsonObject[i].name, jsonObject[i].description)}}
	                                                   );
	                    jsonObject[i].animation = createOnClickAnimation(drawable);
                    } else {
                    	label = new AR.Label(jsonObject[i].name,1.0, {offsetY : -1.5,
                            style : {textColor : '#00C100',backgroundColor : '#FFFFFF80'}});
                    	drawable = new AR.Model("Build11.wt3");
                    }
                    
                    jsonObject[i].arLabel = label;
                    jsonObject[i].drawable = drawable;
                    
                    poidrawables.push(label);
                    poidrawables.push(drawable);
                    geoLoc = new AR.GeoLocation(jsonObject[i].latitude,jsonObject[i].longitude,jsonObject[i].altitude);
                    jsonObject[i].poiObj = new AR.GeoObject(geoLoc, {drawables: {cam: poidrawables}});
                }
                
                document.getElementById("statusElement").innerHTML='JSON objects loaded';	
                
            }

    		function updateData(jsonData) {
    			document.getElementById("statusElement").innerHTML = 'Updating JSON objects';

    			for ( var i = 0; i < jsonData.length; i++) {
    				jsonObject[i].poiObj.locations[0].latitude = jsonData[i].latitude;
    				jsonObject[i].poiObj.locations[0].longitude = jsonData[i].longitude;
    			}

    			document.getElementById("statusElement").innerHTML = 'JSON objects updated';
    		}
    		
            // Called if loading of the image fails.
            function errorLoadingImage() {
                // set error message on HUD
                document.getElementById("statusElement").innerHTML = "Unable to load image!";
            }
            
            // hide bubble and reset the selected poi if nothing was hit by a display click
            AR.context.onScreenClick = function()
            {
                // hide the bubble
                document.getElementById("footer").style.display = 'none';
                
                // and reset the current selected poi
                if(selectedObject != null)
                {
                    // reset the property animation
                    if(selectedObject.animation){
                    	selectedObject.animation.stop();
                    }
                    
                    selectedObject.arLabel.style.backgroundColor = '#FFFFFF80';
                    selectedObject.drawable.scaling = 1.0;
                    selectedObject.poiObj.renderingOrder = 0;
                    selectedObject = null;
                }
            }
            
            function encode(str) {
                var result = "";
                
                for (i = 0; i < str.length; i++) {
                        if (str.charAt(i) == " ") result += "+";
                        else result += str.charAt(i);
                }
                
                return escape(result);
	        }
	
	        function decode(str) {
	                var result = str.replace(/\+/g, " ");
	                return unescape(result);
	        }
            </script>


	<!-- Status element at the top of the HUD -->
	<div id="statusElement" class="status"></div>
	<br />
	<br />
	<br />
	<div id="footer">
		<h3>
			<span id="poiName" style="text-align: center;"></span>
		</h3>
		<span id="poiDesc"></span><br />
		<p style="text-align: center;">ver más...</p>
	</div>
</body>
</html>